<template>
  <v-card flat height="168">
    <v-spacer class="d-flex dialog-content">
      <v-col class="bold-text"> Are you sure to delete? </v-col>
      <v-col class="">
        Phases {{ propPhases.phases }}<br />
        Half of the progress of the works to pay {{ propPhases.percentage }} of
        the project total
      </v-col>
      <v-col>
        <v-btn
          @click="deletePhases"
          class="send-btn ml-2"
          width="32"
          height="32"
          color="#D9D9D9"
          fab
          elevation="0"
        >
          <v-icon class="send-icon" color="#556282" small>mdi-delete</v-icon>
        </v-btn>
      </v-col>
    </v-spacer>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  props: {
    phases: Object,
  },
})
export default class DeletePhases extends Vue {
  get propPhases() {
    return this.$props.phases;
  }
  deletePhases() {
    this.$emit("delete", this.propPhases);
  }
}
</script>
<style lang="scss" scoped>
@import "@/components/Quotation/Dialog/Dialog.scss";
</style>
